<template>
	<view class="content">
		<navigator :url='"plugin-private://wx293c4b6097a8a4d0/pages/novel/index?blockUnpaidScroll=1&bookId=" + continuelist.book_id'>
			<div class="box">
				<image :class="pageLength == 1 ?'cover_img': 'cover_img long_img' "
					:src="pageLength == 1 ? continuelist.cover_img : continuelist.cover_imgad" mode="">
				</image>
				<div class="text" v-if="pageLength == 1">
					<text class="title">{{continuelist.name}}</text>
					<text class="desc">{{continuelist.synopsis}}</text>
				</div>
			</div>
		</navigator>
	</view>
</template>
<script setup lang="ts">
	import { useNovelStore } from '../../stores/novel'
	import { getContents } from '@/api/index'
	import { getChapterFindispay } from '@/api/toutiao'
	import { ref, onMounted } from 'vue'
	onMounted(() => {
		_getChapterFindispay();
	})

	let pageLength
	const userNovel = useNovelStore()
	const continuelist = ref({})


	// const gotoBook = (item) => {
	// 	uni.redirectTo({
	// 		url: `plugin-private://wx293c4b6097a8a4d0/pages/novel/index?bookId=${item}`
	// 	});
	// }

	const _getChapterFindispay = async () => {
		try {
			const res = await getContents({ book_id: userNovel.book_id }) || []
			const bookRes = await getChapterFindispay({ book_id: userNovel.book_id, ChapterIndex: userNovel.chapterIndex })
			pageLength = res.length;
			continuelist.value = bookRes[0].continuelist[0] || []
			console.log(res, '111');
		} catch (e) {
			//TODO handle the exception
		}
	}
</script>

<style scoped lang="scss">
	.box {
		width: calc(100% - 10px);
		height: 90px;
		background: rgb(254, 250, 238);
		border-radius: 0.3rem;
		padding: 5px;
		display: flex;
		position: relative;
		z-index: 3;

		image {
			width: 5rem;
			height: 100%;
			border-radius: 3px;
		}

		.cover_img {
			// width: 100%;
			width: 5rem;
			object-fit: scale-down;
		}

		.long_img {
			width: 100% !important;
			flex: 1;
		}

		.text {
			width: calc(100% - 5rem);
			height: 100% !important;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding-left: 1rem;

			.title {
				@include tx(1rem);
				color: #373737;
				font-weight: 600;
				// @include omit(1);
				display: flex;
				align-items: center;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				line-height: 1.1rem;
				height: 1.1rem;
				width: 100%;
			}

			.desc {
				margin: 8rpx 0;
				@include tx(28rpx, 40rpx);
				// -webkit-line-clamp: 2 !important;
				color: #898989;
				height: 40px;
				@include omit(3);
				/* #ifdef MP-WEIXIN */
				font-size: 0.8rem;
				/* #endif */
				color: #000;
			}
		}
	}
</style>